<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content=" text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/blueprint/screen.css" media="screen, projection" />
        <link rel="stylesheet" type="text/css" href="css/blueprint/print.css" media="print" />
        <!--[if IE]>
            <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" />
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="css/main.css" media="screen, projection" />
        <script type="text/javascript" src="js/vendor/mootools-1.2.2-core-yc.js">
        </script>
        <script type="text/javascript" src="js/vendor/mootools-1.2.2-more.js">
        </script>
        <script type="text/javascript" src="js/inputFocus.js">
        </script>
        <link rel="stylesheet" href="js/vendor/formcheck/theme/classic/formcheck.css" type="text/css" media="screen" />
        <script type="text/javascript" src="js/vendor/formcheck/formcheck.js">
        </script>
        <script type="text/javascript" src="js/vendor/formcheck/lang/it.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/message_boxes.css" media="screen, projection" />
		<!-- <link rel="stylesheet" type="text/css" href="css/fancy-left.css" media="screen, projection" /> -->
        {literal}<!-- Effect for messagebox -->
        <script type="text/javascript" language="JavaScript">
            
            // Formcheck
            window.addEvent('domready', function(){
            
                var box = $('messagebox');
                box.setStyle('opacity', '0');
                var myFx = new Fx.Tween(box, {
                    property: 'opacity',
                    duration: 1000
                });
                
                
                var validator = false;
                new FormCheck('login', {
                    submitByAjax: true,
                    onAjaxRequest: function(){
                        validator = true;                       
                        
                        var req = new Request({
                            method: 'post',
                            url: 'index.php?pg=login&ajax=on',
                            data: $('login'),
                            onRequest: function(){
                                box.addClass('info');
                                box.set('html', 'Controllo dei dati...');
                            },
                            onComplete: function(response){
                                myFx.start(0, 1).wait(500).chain(function(){
                                    box.removeClass('info');
                                    if (response == 1) {
                                        box.addClass('success');
                                        box.set('html', 'Credenziali corrette');
										myFx.start(1,1).wait(300).chain(function(){
	                                        myFx.start(1, 0).chain(function(){
	                                            box.removeClass('success');
	                                            window.location = './?pg=home';
	                                        });
										});
                                    }
                                    else {
                                        box.addClass('error');
                                        box.set('html', 'Dati non corretti');
										myFx.start(1,1).wait(300).chain(function(){
											myFx.start(1, 0).chain(function(){
                                            	box.removeClass('error');
                                            	window.location = '.';
                                        	});	
										});   
                                    } 
                                });
                            }
                        }).send();
                    }
                });
            });
        </script>
        {/literal}<title>Login</title>
    </head>
    <body>
        <div class="container">
            <div class="span-24 last" style="height:80px;">
                <div class="span-6">
                    <div id="messagebox">
                        Hi I'm message box!!
                    </div>
                </div>
            </div>
            <div class="prepend-8 span-8 append-8 last">
                <div class="span-8 last">
                    <h2 class="titlelogin">Backoffice del sito</h2>
                    {if !$utente}
                    {if !$login_error}
                    <form id="login" method="post" name="login" action="./?pg=login">
                    	
						
						<fieldset class="fancy-left">
                            <legend>
                                Login:
                            </legend>
							<ol>
								<li>
									<label for="username">
										Username: 
									</label>
									<input class="text validate['required']" type="text" name="user" />
								</li>
                            	<li>
                            		<label for="password">
		                                Password: 
        		                    </label>
									<input class="text validate['required']" type="password" name="pass" />
                            	</li>
                            </ol>
						</fieldset>
						<fieldset class="fancy-left submit">
                            <input class="button" type="submit" value="Entra" name="submit"/>
                        </fieldset>
						{/if}
                        {else}
                        <script language='javascript'>
                            window.location.href = './?pg=home'
                        </script>
                        {/if}
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
